<style scoped>
</style>
<template>
    <div>
        <Button type="primary" @click="addModal = true">添加菜单</Button>
        <Table border :columns="columns" :data="table_data"></Table>
        <Modal
                v-model="addModal"
                title="添加菜单"
                @on-ok="addCate"
                @on-cancel="cancel">
            栏目名称：<Input v-model="addName" prefix="ios-contact" placeholder="Enter name" style="width: auto"/>
            <br>

            <br>
            链接地址：<Input v-model="addUrl" prefix="ios-contact" placeholder="Enter Url" style="width: auto"/>
            <br>
            <br>
            是否显示：
            <i-switch v-model="addSwitch" @on-change="addChange">
                <span slot="open">开</span>
                <span slot="close">关</span>
            </i-switch>
            <br><br>
            上级栏目：<Select v-model="parent_add" style="width:200px">
                <Option v-for="(item,index)  in parent_list" :value="item.id" :key="index">{{ item.cate_name }}</Option>
            </Select>
        </Modal>

        <Modal
                v-model="editModal"
                title="编辑菜单"
                @on-ok="editCate"
                @on-cancel="cancel">
            栏目名称：<Input v-model="editName" prefix="ios-contact" placeholder="Enter name" style="width: auto"/>
            <br>
            <br>
            链接地址：<Input v-model="editUrl" prefix="ios-contact" placeholder="Enter Url" style="width: auto"/>
            <br>
            <input type="hidden" v-model='editID'>

            <br>
            是否显示：
            <i-switch v-model="editSwitch" @on-change="addChange">
                <span slot="open">开</span>
                <span slot="close">关</span>
            </i-switch>
            <br><br>
            上级栏目：<Select v-model="parent_edit" style="width:200px">
            <Option v-for="(item,index) in parent_list" :value="item.id" :key="index">{{ item.cate_name }}</Option>
        </Select>
        </Modal>
    </div>
</template>
<script>
    export default {
        name: 'CateComponent',
        data() {
            return {
                columns: [
                    {
                        title: 'ID',
                        key: 'id',
                        width: 100,
                    },
                    {
                        title: '菜单名称',
                        key: 'cate_name',
                        width: 100
                    },
                    {
                        title: '链接地址',
                        key: 'url',
                    },
                    {
                        title: '是否显示',
                        key: 'is_show',
                        width: 100
                    },
                    {
                        title: '上级ID',
                        key: 'pid',
                        width: 100
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 160,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on:{
                                        click:()=>{
                                            this.editModal = true,
                                                this.show(params.index);
                                        }
                                    }
                                }, 'Edit'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },on:{
                                        click:()=>{
                                            this.remove(params.index)
                                        }
                                    }

                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                table_data: [],
                addModal: false,
                addName: "",
                addUrl: "",
                addSwitch: false,
                parent_list: [],
                parent_add: '',
                editModal: false,
                editName: "",
                editUrl: "",
                editSwitch: false,
                parent_edit:'',
                editID:''

            }
        },
        mounted() {
            this.getAll();
        },
        methods: {
            getAll() {
                axios.get('cate', {}).then((response) => {
                    console.log(response);
                    this.table_data = response.data;
                    this.parent_list=response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            addCate() {
                console.log(this.parent_add);
                axios.post('cate',{
                    'cate_name':this.addName,
                    'url':this.addUrl,
                    'is_show':this.addSwitch? '1':'0',
                    'pid':this.parent_add ? this.parent_add:'0',
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    setTimeout(()=>{
                        this.getAll();
                    },1500);
                }).catch(function (error) {
                    console.log(error);
                })
            },
            editCate(){
                const url="cate/"+this.editID;
                axios.put(url,{
                    'id':this.editID,
                    'cate_name':this.editName,
                    'url':this.editUrl,
                    'is_show':this.editSwitch? '1':'0',
                    'pid':this.parent_edit ? this.parent_edit:'0',
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    setTimeout(()=>{
                        this.getAll();
                    },1500);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            remove (index) {

                const url='cate/'+this.table_data[index].id;
                axios.delete(url,{
                    data:{'id':this.table_data[index].id}
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    if(response.data.code===1){
                        //code为1是删除成功
                        this.table_data.splice(index, 1);
                    }else {}
                }).catch(function (error) {
                    console.log(error);
                });
            },
            cancel() {
                this.$Message.info('Clicked cancel');
            },

            show (index) {
                this.editID=this.table_data[index].id;
                this.editName=this.table_data[index].cate_name;
                this.editUrl=this.table_data[index].url;
                this.editSwitch=this.table_data[index].is_show? true:false;
                this.parent_edit=this.table_data[index].pid;

            },
            addChange(status) {
                this.$Message.info('开关状态：' + status);
            }
        }

    }
</script>


